<%--
  Created by IntelliJ IDEA.
  User: 斋藤飞鸟の翼
  Date: 2020/11/10
  Time: 13:31
  To change this template use File | Settings | File Templates.
--%>
<%@include file="../common/IncludeTop.jsp"%>

    <div id="Welcome">
        <div id="WelcomeContent">
            <h3>Welcome to PetHub!</h3>
        </div>
    </div>

    <div id="Main">
        <div id="Sidebar">
            <div id="SidebarContent">
                <a href="category?categoryId=FISH">Fish</a>
                <br><br> Saltwater, Freshwater <br><br>
                <a href="category?categoryId=DOGS">Dog</a>
                <br><br> Various Breeds <br><br>
                <a href="category?categoryId=CATS">Cat</a>
                <br><br> Various Breeds, Exotic Varieties <br><br>
                <a href="category?categoryId=REPTILES">Reptile</a>
                <br><br> Lizards, Turtles, Snakes <br><br>
                <a href="category?categoryId=BIRDS">Bird</a>
                <br><br> Exotic Varieties<br><br>
            </div>
        </div>

        <div id="MainImage">
            <div id="MainImageContent">
                <map name="estoremap">
                    <area alt="Birds" coords="72,2,280,250" href="category?categoryId=BIRDS" shape="rect" onmouseover="overFn1(this)" onmouseleave="outFn1()" class="area1"/>
                    <area alt="Fish" coords="2,180,72,250" href="category?categoryId=FISH" shape="rect" onmouseover="overFn1(this)" onmouseleave="outFn1()" class="area2"/>
                    <area alt="Dogs" coords="60,250,130,320" href="category?categoryId=DOGS" shape="rect" onmouseover="overFn1(this)" onmouseleave="outFn1()" class="area3"/>
                    <area alt="Reptiles" coords="140,270,210,340" href="category?categoryId=REPTILES" shape="rect" onmouseover="overFn1(this)" onmouseleave="outFn1()" class="area4"/>
                    <area alt="Cats" coords="225,240,295,310" href="category?categoryId=CATS" shape="rect" onmouseover="overFn1(this)" onmouseleave="outFn1()" class="area5"/>
                    <area alt="Birds" coords="280,180,350,250" href="category?categoryId=BIRDS" shape="rect" onmouseover="overFn1(this)" onmouseleave="outFn1()" class="area1"/>
                </map>
                <img height="347" src="images/splash.gif" align="middle" usemap="#estoremap" width="357" alt="splash"/>
                <area id="textShow" shape="rect" coords="0,0,0,0"/>
            </div>
        </div>

        <script type="text/javascript" src = "JS/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            function overFn1(obj){//鼠标在上面
                let area = obj;
                let content = "<h3>Information</h3>";
                let coords = area.coords;

                if(area.className==="area1") {content+="<h5>Bird can fly</h5>";}
                else if(area.className==="area2") content+="<h5>Fish can swim</h5>";
                else if(area.className==="area3") content+="<h5>Dog can roar</h5>";
                else if(area.className==="area4") content+="<h5>Reptile can sleep</h5>";
                else if(area.className==="area5") content+="<h5>Cat can eat</h5>";
                else content+="<h5>"+area.className+"</h5><h5>"+coords+"</h5>";
                $("#textShow").fadeIn("slow");
                $("#textShow").html(content);
                $("#textShow").css({"background-color":"rgb(227,198,198)","width":"150px","height":"80px","position":"absolute","z-index":"800","border-radius":"10px"});
                $("#textShow").coords= coords;

            }
            function outFn1(){//鼠标离开
                let content = "";

                $("#textShow").fadeOut("slow");
                $("#textShow").html(content);
                $("#textShow").css({"background-color":"rgb(227,198,198)","width":"150px","height":"80px","position":"absolute","z-index":"800","border-radius":"10px"});
                $("#textShow").coords= "0,0,0,0";

            }
        </script>
        <div id="Separator">&nbsp;</div>
    </div>
<%@include file="../common/IncludeBottom.jsp"%>